<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>

  <body>
    <div id="app">
      <App></App>
    </div>
    <script>
      Vue.config.productionTip = false
      // 使用extend创建子组件,相对于世界使用new,没有el,一般需要书写name
      const Head = Vue.extend({
        name: 'Head',
        template: '<h2>Head</h2>',
        mounted() {
          console.log(this) // vueComponent
          console.log(this.__proto__) //vueComponent的原型对象
          console.log(this.__proto__.__proto__) // Vue的原型对象
          console.log(this.__proto__.__proto__.__proto__) // Object的原型对象
          // 每一个vuecomponent都是通过继承vue实现的他们的原型链中含有vue的原型,所以当需要对多个组件添加相同的数据或者方法时直接
          // 在vue的原型对象上添加就可以实现每一个组件的访问
        },
        // 这样做的原因就是因为一个完整的vue实例对象的数据很多,独立存在的却很少,所以通过这种方式缩小体量
        // 每一个vueComponent都是小型的vm实例
      })
      const App = Vue.extend({
        name: 'App',
        // 创建组件
        template: '<div> <h1>App</h1><Head /></div>',
        components: {
          Head,
        },
      })
      // 组件注册时使用extend创建出的是一个构造方法,在注册时,vue会执行这个构造方法创建出一个实例 ,然后将实例对象放置到页面中加载
      // 每个组件对象的数据和方法都是存储在自己的组件对象中的,数据和方法也是指向自己的组件对象,这些组件对象的原型上是vue的原型,需要
      // 书写公用数据和方法时,书写在vue的原型上
      const vm = new Vue({
        el: '#app',
        data() {
          return {}
        },
        // 注册
        components: {
          App,
        },
      })
    </script>
  </body>
</html>
